<template>
  <div class="sender">
    <div class="sender-content">
      <!-- <Input v-model="keyword" @keyup.enter="handleEnter" /> -->
      <textarea v-model="keyword" @keyup.enter="handleEnter" placeholder="输入开始聊天" />
      <!-- <el-input
        v-model="keyword"
        style="width: 240px"
        :autosize="{ minRows: 1, maxRows: 4 }"
        type="textarea"
        placeholder="Please input"
        @keyup.enter.native="handleEnter"
        resize="none"
      /> -->

      <div class="btn-send" @click="handleEnter">发送</div>
    </div>
  </div>
</template>
<script setup>
import { chat } from '../chat.js'
import Input from './Input.vue'

const keyword = ref('')

const handleEnter = () => {
  try {
    chat.input(keyword.value)
  } catch (e) {
    console.error(e)
  }
  keyword.value = ''
}
</script>
<style lang="scss" scoped>
.sender {
  position: sticky;
  bottom: 0;
  margin-top: 12px;
}

.sender-content {
  background-color: #f3f4f6;
  width: 800px;
  margin: 0 auto;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
  padding: 12px;

  textarea {
    border: none;
    outline: none;
    width: 100%;
    height: 100px;
    background: none;
    font-family: inherit;
    font-size: 16px;
  }
}
</style>
